<template>
  <div class="discover">
    <body-top>
      <div class="center">
        <ul>
          <li
            v-for="item in navList"
            :key="item.path"
            @click="changeNav(item.path)"
          >
            <span
              :class="[
                pathItem === item.path || pathItem === item.path1
                  ? 'active'
                  : ''
              ]"
              >{{ item.name }}</span
            >
          </li>
        </ul>
      </div>
    </body-top>
    <!-- <transition
      mode="out-in"
      enter-active-class="animate__animated animate__fadeInLeft "
      leave-active-class="animate__animated animate__fadeOutLeft"
    > -->
    <router-view />
    <!-- </transition> -->
  </div>
</template>

<script>
import BodyTop from '../../components/common/bodyTop.vue'

export default {
  name: 'Discover',
  data() {
    return {
      navList: [
        {
          name: '推荐',
          path: '/discover/recommend'
        },
        {
          name: '排行榜',
          path: '/discover/toplist'
        },
        {
          name: '歌单',
          path: '/discover/playlist'
        },
        {
          name: '主播电台',
          path: '/discover/djradio',
          path1: '/discover/djradio/category'
        },
        {
          name: '歌手',
          path: '/discover/artist'
        },
        {
          name: '新碟上线',
          path: '/discover/album'
        }
      ],
      pathItem: `${this.$route.path}`
    }
  },
  components: {
    BodyTop
  },

  created() {},

  methods: {
    changeNav(item) {
      this.$router.push(`${item}`).catch((err) => {
        err
      })
      // this.pathItem = item;
    }
  },
  watch: {
    //to是将要进入的路由相关信息，from是当前页面的路由信息
    $route(to) {
      //to.path即为将要进入的路由
      // if(to.path == "/xxx"){
      //   //操作
      // }
      this.pathItem = to.path
    }
  }
}
</script>

<style lang="scss" scoped>
.active {
  background: #9b0909;
}
.body-top {
  height: 35px;
  .center {
    width: 1100px;
    margin: auto;
    height: 100%;
    ul {
      padding-left: 198px;
      height: 100%;
      color: #fff;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      li {
        margin-right: 36px;
        span {
          display: inline-block;
          padding: 0 13px;
          height: 20px;
          text-align: center;

          border-radius: 20px;
          line-height: 20px;
          &:hover {
            background: #9b0909;
          }
        }
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
}
</style>
